<template>
  <div class="dashboard-container">
    <!-- 顶部 面包屑 -->
    <div class="header-nav">
      <!-- 面包屑 -->
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">年度协议管理</a></el-breadcrumb-item>
        <el-breadcrumb-item>二级商协议</el-breadcrumb-item>
        <el-breadcrumb-item>新增二级商协议</el-breadcrumb-item>
      </el-breadcrumb>
      <p style="font-weight: bold">新增二级商协议</p>
    </div>
    <div class="dashboard-content" style="padding-bottom: 30px">
      <!-- 分割线 -->
      <div class="divider-first">
        <span class="line"></span>
        <span class="text"><i class="el-icon-cherry" /> 协议主体</span>
        <span class="line"></span>
      </div>
      <!-- 表单 -->
      <el-form ref="form" :model="form" label-width="70px" class="Subject-first">
        <!--  第一行 -->
        <el-row class="inline-info">
          <el-col :span="12">
            <el-form-item label="协议客户">
              <el-input v-model="form.name" class="inputW" />
              上海正也医药有限公司
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="协议状态">
              <el-select v-model="form.region">
                <el-option label="正常" value="normal"></el-option>
                <el-option label="不正常" value="unnormal"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!--  第二行 -->
        <el-row class="inline-info">
          <el-col :span="12">
            <el-form-item label="购进指标">
              <el-select v-model="form.indicators" style="width:100px;">
                <el-option label="金额" value="金额"></el-option>
                <el-option label="数量" value="数量"></el-option>
              </el-select>
              <el-input v-model="form.sold" placeholder="输入金额/数量" style="width:70%;padding-left: 12px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="纯销指标">
              <el-input v-model="form.indicators" disabled style="width:100px;"></el-input>
              <el-input v-model="form.sold" placeholder="输入金额/数量" style="width:70%;padding-left: 12px"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第三行 -->
        <el-row class="inline-info">
          <el-col :span="12">
            <el-form-item label="销售区域">
              <el-input v-model="form.soldArea" class="inputW" />
              <el-input v-model="form.notion" class="inputW" style="padding-left: 12px" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="签订时间">
              <el-date-picker
                v-model="form.date1"
                type="datetime"
                placeholder="2020-02-01 18:25"
                default-time="12:00:00"
                style="width:89%;"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <!--  第四行 -->
        <el-row class="inline-info">
          <el-form-item label="购进渠道">
            <el-select v-model="form.date2" style="width:130px;">
              <el-option label="渠道1" value="渠道1"></el-option>
              <el-option label="渠道2" value="渠道2"></el-option>
            </el-select>
            <el-input v-model="form.channel" placeholder="请选择渠道" style="width:12%;padding-left: 12px"></el-input>
          </el-form-item>
        </el-row>
        <!-- 第五行 -->
        <el-row class="inline-info">
          <el-form-item>
            <el-table :data="tableData" style="width: 100%" :header-cell-style="$store.state.app.headerRowStyle">
              <el-table-column prop="date" label="指定渠道编码" width="360"></el-table-column>
              <el-table-column prop="name" label="指定渠道名称" width="360"></el-table-column>
              <el-table-column prop="address" label="所在省" width="360"></el-table-column>
            </el-table>
          </el-form-item>
        </el-row>
      </el-form>
      <!-- 分割线-second -->
      <div class="divider-first">
        <span class="line"></span>
        <span class="text"><i class="el-icon-cherry" /> 协议主体</span>
        <span class="line"></span>
      </div>
      <!--  分割信息  -->
      <div class="divider-TotalIndex">
        <el-button type="primary" size="small" style="margin-right: 10px">添加产品</el-button>
        <p>购进总指标（万元）：<span style="margin-right: 20px">￥152.65</span></p>
        <p>指标按季度分解（万元）：<span>【Q1】￥12.5</span> <span>【Q1】￥12.5</span> <span>【Q1】￥12.5</span><span
          style="margin-right: 20px"
        >【Q1】￥12.5</span></p>
        <p>纯销总指标（万元）：<span>￥152.65</span></p>
        <el-button
          type="warning"
          plain
          style="float: right;margin-right: 10px;margin-bottom: 10px"
          size="small"
          class="orange"
        >
          警告按钮
        </el-button>
      </div>
      <!--  产品政策 -->
      <el-form ref="form" :model="form" label-width="70px" class="Subject-first">
        <el-row class="inline-info">
          <el-col :span="12">
            <el-form-item label="产品">
              <el-input v-model="form.resource" class="inputW" />
              美复胶丸 24粒/盒
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="协议效期">
              <el-date-picker
                v-model="form.desc"
                type="daterange"
                range-separator="~"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form ref="form" :model="form" class="Subject-first" style="padding-right:15px">
        <el-row>
          <el-form-item>
            <el-table :data="fileData" :header-cell-style="$store.state.app.headerRowStyle">
              <el-table-column label="协议价(元)">
                <el-input v-model="fileData.name" class="inputW" style="width: 140px" placeholder="请输入" />
              </el-table-column>
              <el-table-column label="票价(元)">
                <el-input v-model="fileData.name" class="inputW" style="width: 140px" placeholder="请输入" />
              </el-table-column>
              <el-table-column label="购进指标量(大单位)">
                <el-input v-model="fileData.name" class="inputW" style="width: 140px" placeholder="请输入" />
              </el-table-column>
              <el-table-column label="购进指标量(小单位)">
                <el-input v-model="fileData.name" class="inputW" style="width: 140px" placeholder="请输入" />
              </el-table-column>
              <el-table-column label="购进金额(万元)">
                <el-input v-model="fileData.name" class="inputW" style="width: 140px" placeholder="请输入" />
              </el-table-column>
              <el-table-column label="纯销指标量(小单位)">
                <el-input v-model="fileData.name" class="inputW" style="width: 140px" placeholder="请输入" />
              </el-table-column>
              <el-table-column label="纯销指标金额(万元)">
                <el-input v-model="fileData.name" class="inputW" style="width: 140px" placeholder="请输入" />
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item>
            <el-table :data="fileData" :header-cell-style="$store.state.app.headerRowStyle">
              <el-table-column label="分销奖励">
                <el-input v-model="fileData.name" class="inputW" style="width: 130px" placeholder="请输入" />
              </el-table-column>
              <el-table-column label="费用科目">
                <el-select v-model="form.obj" style="width:130px;">
                  <el-option>
                    <el-radio v-model="form.obj" label="单选项1">单选项1</el-radio>
                  </el-option>
                  <el-option>
                    <el-radio v-model="form.obj" label="单选项2">单选项2</el-radio>
                  </el-option>
                </el-select>
              </el-table-column>
              <el-table-column label="零售配送">
                <el-input v-model="fileData.name" class="inputW" style="width: 130px" placeholder="请输入" />
              </el-table-column>
              <el-table-column label="费用科目">
                <el-select v-model="form.obj2" style="width:130px;">
                  <el-option label="单选项1" value="单选项1">
                    <el-checkbox v-model="form.checked1">多选项1</el-checkbox>
                  </el-option>
                  <el-option label="单选项2" value="单选项2">
                    <el-checkbox v-model="form.checked2">备选项</el-checkbox>
                  </el-option>
                </el-select>
              </el-table-column>
              <el-table-column label="医疗配送商">
                <el-input v-model="fileData.name" class="inputW" style="width: 130px" placeholder="请输入" />
              </el-table-column>
              <el-table-column label="费用科目">
                <el-select v-model="form.obj2" style="width:130px;">
                  <el-option label="单选项1" value="单选项1">
                    <el-checkbox v-model="form.checked1">多选项1</el-checkbox>
                  </el-option>
                  <el-option label="单选项2" value="单选项2">
                    <el-checkbox v-model="form.checked2">备选项</el-checkbox>
                  </el-option>
                </el-select>
              </el-table-column>
              <el-table-column label="自定义7">
                <el-input v-model="fileData.name" class="inputW" style="width: 130px" placeholder="请输入" />
              </el-table-column>
              <el-table-column label="自定义8">
                <el-input v-model="fileData.name" class="inputW" style="width: 130px" placeholder="请输入" />
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-row>
      </el-form>
      <!-- 分割线 -->
      <div class="divider-first">
        <span class="line"></span>
        <span class="text"><i class="el-icon-cherry" /> 协议主体</span>
        <span class="line"></span>
      </div>
      <!-- 补充协议 -->
      <el-form ref="form" :model="form" label-width="70px" class="Subject-first">
        <el-tabs v-model="activeName" type="card" style="padding-bottom: 30px" @tab-click="handleClick">
          <el-tab-pane label="补充协议1" name="first">
            <el-row class="inline-info">
              <span>补充协议1</span>
              <el-button type="warning" plain style="float: right;margin-right: 10px;margin-bottom: 10px" size="small">
                警告按钮
              </el-button>
            </el-row>
            <el-input
              v-model="textarea"
              resize="none"
              type="textarea"
              :rows="8"
              placeholder="请输入内容"
              style="width: 100%"
            >
            </el-input>
          </el-tab-pane>
          <el-tab-pane label="补充协议2" name="second">
            <el-row class="inline-info">
              <span>补充协议2</span>
              <el-button type="warning" plain style="float: right;margin-right: 10px">警告按钮</el-button>
            </el-row>
            <el-input
              v-model="textarea"
              resize="none"
              type="textarea"
              :rows="8"
              placeholder="请输入内容"
              style="width: 100%"
            >
            </el-input>
          </el-tab-pane>
          <el-tab-pane label="补充协议3" name="third">
            <el-row class="inline-info">
              <span>补充协议3</span>
              <el-button type="warning" plain style="float: right;margin-right: 10px">警告按钮</el-button>
            </el-row>
            <el-input
              v-model="textarea"
              resize="none"
              type="textarea"
              :rows="8"
              placeholder="请输入内容"
              style="width: 100%"
            >
            </el-input>
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </div>
    <el-button type="primary" style="margin-top: 10px">保存</el-button>
  </div>
</template>

<script>

export default {
  name: 'Dashboard',
  data() {
    return {
      form: {
        name: '选择客户',
        region: '正常',
        indicators: '金额',
        soldArea: '选择区域',
        notion: '全国',
        date1: '',
        date2: '指定渠道',
        delivery: false,
        resource: '选择产品',
        desc: '',
        obj: '单选项1',
        checked1: false,
        checked2: true,
        obj2: '多选项1'
      },
      tableData: [{
        date: 'BJ000090',
        name: '宁波九州通药业有限公司',
        address: '浙江省'
      }, {
        date: 'BJ000192',
        name: '国药控股精华有限公司',
        address: '浙江省'
      }, {
        date: 'BJ000283',
        name: '老百姓药业有限公司',
        address: '浙江省'
      }],
      fileData: [{
        name: '请输入'
      }],
      activeName: 'first',
      textarea: ''
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 15px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.header-nav p {
  margin: 10px;
}

.dashboard-content {
  padding-top: 3px;
  background-color: #f5f5f5;
}

.divider-first {
  padding-top: 15px;
  margin: 0 auto 15px;
  display: flex;
  align-items: center;
  width: 98%;
}

.line {
  border-top: 1px dotted #000;
  flex-grow: 1;
}

.text {
  margin: 0 10px;
}

.Subject-first {
  background-color: #fff;
  width: 98%;
  border-radius: 1%;
  padding-left: 25px;
  padding-top: 12px;
  margin: 0 auto 3px;
}

.inputW {
  width: 120px;
}

.divider-TotalIndex {
  display: flex;
  justify-content: left;
  align-items: center;
  font-size: 14px;
  margin-left: 10px;
}

.divider-TotalIndex p {
  font-size: 12px;
}

.divider-TotalIndex p span {
  font-size: 14px;
  font-weight: bold;
}
</style>
